<template>
  <div class="customer-list">
    <c-table
      ref="table"
      :data="customerList.pageData"
      :total="customerList.total"
      :columns="columns"
      :loading="tableLoading"
      rowKey="companyId"
      :selection="selectingCustomer"
      search
      @onSearch="onSearch"
      @onSelectChange="onSelectChange"
      :selectedRowKeys="selectedIds"
      @onReload="reload"
      @pageChange="pageChange"
    >
      <template v-slot:header-l>
        <c-button type="primary" @click="add">添加客户</c-button>
        <template v-if="selectingCustomer">
          <c-button type="danger" @click="selectingCustomer = false"
            >取消</c-button
          >
          <c-button
            type="success"
            @click="batchUpdateQuota"
            :disabled="selectedIds.length === 0"
            >确认</c-button
          >
          <span class="desc"
            >请勾选需要修改额度的公司，已勾选
            <i> {{ selectedIds.length }} </i>个</span
          >
        </template>
        <a-button-group v-else>
          <c-button type="primary" @click="updateQuota">批量修改额度</c-button>
          <c-button
            type="primary"
            ghost
            v-if="!selectingCustomer"
            @click="selectedAllCustomer"
            >选择所有客户</c-button
          >
        </a-button-group>
      </template>
      <!-- <template v-slot:header-r>
        <c-search-box v-model="searchKey" @search="search"></c-search-box>
      </template> -->
      <template v-slot:realName="{ row }">
        <span>{{ row }}</span>
      </template>
      <template v-slot:phone="{ row }">
        <span>{{ row }}</span>
      </template>
      <template v-slot:creditList="row">
        <ul v-if="row.row.creditList" class="quotaList">
          <li v-for="item in row.row.creditList" :key="item.id">
            <c-tags
              :data="[
                {
                  label: item.categoryName + '  ' + item.futuresContractCode,
                  color: 'blue'
                }
              ]"
            ></c-tags>
            <i>：</i>
            <span>{{ item.availableCredit }}</span>
          </li>
        </ul>
      </template>
      <template slot="handle" slot-scope="{ row }">
        <div class="handle">
          <c-button type="link" @click="manage(row)">交易管理</c-button>
        </div>
      </template>
    </c-table>
    <c-modal title="交易管理" v-model="manageVisible" :width="800" noFooter>
      <manage
        :companyData="manageCompanyData"
        :businessDirection="1"
        @updated="reload"
      />
    </c-modal>
  </div>
</template>

<script>
import { getCustomers } from "@/api/customer";
import manage from "./components/manage";
import { findIndex } from "lodash";

const columns = [
  {
    title: "公司全称",
    dataIndex: "companyName"
  },
  {
    title: "联系人",
    dataIndex: "realName",
    scopedSlots: { customRender: "realName" }
  },
  {
    title: "联系电话",
    dataIndex: "phone",
    scopedSlots: { customRender: "phone" }
  },
  {
    title: "采购额度",
    scopedSlots: { customRender: "creditList" }
  },
  {
    title: "操作",
    scopedSlots: { customRender: "handle" }
  }
];

export default {
  components: {
    manage
  },
  data() {
    return {
      customerList: [],
      columns,
      selectingCustomer: false, // 是否批量修改额度
      selectedCustomers: [], // 已勾选的客户
      selectedIds: [], // 已勾选客户的companyId
      searchKey: undefined,
      page: {
        num: 1,
        size: 20
      },
      manageVisible: false,
      manageCompanyData: null,
      tableLoading: false
    };
  },
  watch: {
    pageNum() {
      this.getCustomers();
    }
  },
  methods: {
    // 搜索
    onSearch(val) {
      this.searchKey = val;
      this.reload();
    },
    // 添加客户
    add() {
      this.$router.push({ name: "customerSelfAdd" });
    },
    // 批量修改额度
    updateQuota() {
      this.selectingCustomer = true;
    },
    // 选择所有客户
    selectedAllCustomer() {
      this.$storage.s_set("batchUpdateQuota", "all");
      this.$router.push({ name: "customerSelfQuota" });
    },
    // 前往批量修改额度
    batchUpdateQuota() {
      let selectedCustomers = JSON.parse(
        JSON.stringify(this.selectedCustomers)
      );
      selectedCustomers = selectedCustomers.filter(
        i => this.selectedIds.indexOf(i.companyId) !== -1
      );
      this.$storage.s_set("batchUpdateQuota", selectedCustomers);
      this.$router.push({ name: "customerSelfQuota" });
    },
    // 勾选时触发
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedIds = selectedRowKeys;
      if (selectedRows) {
        selectedRows.forEach(item => {
          let idx = findIndex(this.selectedCustomers, [
            "companyId",
            item.companyId
          ]);
          if (idx === -1) this.selectedCustomers.push(item);
        });
      } else {
        this.selectedCustomers = [];
      }
    },
    // 交易管理
    manage(row) {
      this.manageVisible = true;
      this.manageCompanyData = row;
    },
    reload() {
      // this.selectedIds = [];
      // this.selectedCustomers = [];
      this.page.num = 1;
      this.getCustomers();
    },
    pageChange(page) {
      this.page.num = page;
      this.getCustomers();
    },
    // 获取客户列表
    getCustomers() {
      this.tableLoading = true;
      getCustomers({
        customerName: this.searchKey,
        pageData: {
          pageNum: this.page.num,
          pageSize: this.page.size
        }
      })
        .then(res => {
          this.customerList = res;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    }
  },
  created() {
    this.getCustomers();
  }
};
</script>

<style lang="scss" scoped>
.quotaList {
  overflow: auto;
  max-height: 250px;
  li:not(:last-child) {
    margin-bottom: 2px;
  }
}
</style>
